<template>
    <div class="detail_l">
        <div class="detail_t">
            <div class="pic">
                <img :src="albumData.picUrl" alt="">
                <i class="mask"></i>
            </div>
            <div class="info">
                <div class="title">
                    <i class="sing"></i>
                    <div class="name">
                        <h2>{{ musicData.name }}</h2>
                        <span>{{ tagData }}</span>
                    </div>
                </div>
                <div class="user">
                    <p><b>歌手：</b>
                        <a v-for="item in artistData" :key="item.id" @click="$router.push(`/artlist/${item.id}`)">{{ item.name }}</a>
                    </p>
                    <p><b>所属专辑：</b><a @click="$router.push(`/albumlist/${albumData.id}`)">{{ albumData.name }}</a></p>
                    <p><b>出版日期：</b><a>{{ publishTime | showDate }}</a></p>
                </div>
                <div class="btns">
                    <a class="play" title="播放" @click="play">
                      <i class="play_in">
                        <span>播放</span>
                      </i>
                    </a>
                    <a class="add" title="添加到播发列表"></a>
                    <a class="dis" title="收藏">
                      <span>收藏</span>
                    </a>
                    <a class="share" title="分享">
                      <span>分享</span>
                    </a>
                    <a class="download" title="下载">
                      <span>下载</span>
                    </a>
                    <a class="comment" title="评论" @click="viewClick()">
                      <span>({{ commentCount || '评论' }})</span>
                    </a>
                </div>
                <!-- class="lyric" -->
                <div class="changeBtn">
                    <button style="color:#fff;background: #0C73C2;">歌词风格：</button>
                    <button @click="isLyric=1" :class="{'active': isLyric===1}">普通风格</button>
                    <button @click="isLyric=2" :class="{'active': isLyric===2}">黑亮风格</button>
                    <button @click="isLyric=3" :class="{'active': isLyric===3}">白亮风格</button>
                    <button @click="isLyric=4" :class="{'active': isLyric===4}">白大风格</button>
                    <button @click="isLyric=5" :class="{'active': isLyric===5}">黑大风格</button>
                </div>
                <div class="dec" ref="dec">
                    <!-- 歌词1 -->
                    <ul v-if="isLyric==1" ref="lyricUL" :class="{'clamp':!isShow}">
                        <li v-for="(item,index) in lyricsObjArr" :key="index" ref="lyric" :data-index='index'>
                            {{ item.lyric }}
                        </li>
                    </ul>
                    <!-- 歌词2 -->
                    <ul v-if="isLyric==2" ref="lyricUL" :class="{'clamp':!isShow}">
                        <li v-for="(item,index) in lyricsObjArr" :style="{color: lyricIndex === index ? '#0C73C2' : '#333'}" :key="index" ref="lyric" :data-index='index'>
                            {{ item.lyric }}
                        </li>
                    </ul>
                    <ul v-else-if="isLyric==3" ref="lyricUL" :class="{'clamp':!isShow}">
                        <li v-for="(item, index) in lyricsObjArr" :style="{color: lyricIndex === index ? '#0C73C2' : '#ded9d9'}" :key="index" :data-index='index' ref="lyric">{{item.lyric}}</li>
                    </ul>
                    <!-- 歌词3 -->
                    <ul v-else-if="isLyric==4" ref="lyricUL" class="lyric_white" :class="{'clamp':!isShow}">
                        <li :class="{each:true, choose: (index==lyricIndex)}" v-for="(item, index) in lyricsObjArr" :key="index" :data-index='index' ref="lyric">{{item.lyric}}</li>
                    </ul>
                    <ul v-else-if="isLyric==5" ref="lyricUL" class="lyric_black" :class="{'clamp':!isShow}">
                        <li :class="{each:true, choose: (index==lyricIndex)}" v-for="(item, index) in lyricsObjArr" :key="index" :data-index='index' ref="lyric">{{item.lyric}}</li>
                    </ul>
                    <a v-show="!isShow" @click="isShow=!isShow">展开<i class="exp"></i></a>
                    <a v-show="isShow" @click="isShow=!isShow">收齐<i class="col"></i></a>
                </div>
            </div>
        </div>
        <!-- 音乐播放器 -->
        <div class="music">
            <div class="music_in">
                <img :src="imgUrl" alt="" :class="{'run':ifPlaying,'pause':ifPaused}">
                <audio id="myAudio" @play="musicPlay" @pause="musicPause" controls autoplay :src="url" @canplay="getDuration" @timeupdate="updateTime" ref="audio"></audio>
            </div>
        </div>
        <!-- 歌单评论 -->
        <div class="comment_title" id="view">
            <h2>评论</h2>
            <span>共{{ commentCount }}条评论</span>
        </div>
        <div class="comment">
            <div class="com_l">
                <img src="http://p1.music.126.net/B8zVoyFfiBy6hnrLy3KTWg==/109951167913480051.jpg?param=200y200" alt="" v-if="$store.state.isHeader">
                <img src="http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50" alt="" v-else>
            </div>
            <div class="com_r">
                <textarea name="" id="" placeholder="评论" v-model="content"></textarea>
                <div class="btns">
                    <div><i class="smile"></i><i class="alt"></i></div>
                    <div><span class="count">{{contentMaxLength - content.length}}</span><a @click="viewBtn">评论</a></div>
                </div>
            </div>
        </div>
        <div class="comment_list">
            <h3 v-show="hotComments.length==0?false:true">精彩评论</h3>
            <ul>
                <li v-for="(item, index) in hotComments" :key="index">
                    <img :src="item.user.avatarUrl" alt="">
                    <div class="cnt">
                        <div class="cnt_t">
                            <p class="text">
                                <span class="name" @click="$router.push(`/user/${item.user.userId}`)">
                                    {{ item.user.nickname }}:
                                </span>
                                {{ item.content }}
                            </p>
                        </div>
                        <div class="cnt_c" v-for="(item1, index) in item.beReplied" :key="index">
                            <p class="text" >
                                <span class="name" @click="$router.push(`/user/${item1.user.userId}`)">
                                    {{ item1.user.nickname }}:
                                </span>
                                {{ item1.content }}
                            </p>
                        </div>
                        <div class="cnt_b">
                            <span class="time">{{ item.time | showDate }}</span>
                            <span class="zan">
                                <i class="good" v-show="!item.liked" @click="likeFn(item)"></i>
                                <i class="like" v-show="item.liked" @click="unlikeFn(item)"></i>
                                <i class="count">({{ item.likedCount }})</i>
                                <i class="sep">|</i>
                                <i class="view" @click="replyFn(item)">回复</i>
                            </span>
                        </div>
                        <!-- 回复区域 -->
                        <div class="reply" v-show="item.owner">
                            <textarea v-model="recontent" ></textarea>
                            <div class="btns">
                              <div><i class="smile"></i><i class="alt"></i></div>
                              <div><span class="count">{{contentMaxLength - recontent.length}}</span><a @click="replyBtn(item)">回复</a></div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <h3 v-show="comments.length==0?false:true">最新评论</h3>
            <ul>
                <li v-for="(item, index) in comments" :key="index">
                    <img :src="item.user.avatarUrl" alt="">
                    <div class="cnt">
                        <div class="cnt_t">
                            <p class="text">
                                <span class="name" @click="$router.push(`/user/${item.user.userId}`)">
                                    {{ item.user.nickname }}:
                                </span>
                                {{ item.content }}
                            </p>
                        </div>
                        <div class="cnt_c" v-for="(item1, index) in item.beReplied" :key="index">
                            <p class="text" >
                                <span class="name" @click="$router.push(`/user/${item1.user.userId}`)">
                                    {{ item1.user.nickname }}:
                                </span>
                                {{ item1.content }}
                            </p>
                        </div>
                        <div class="cnt_b">
                            <span class="time">{{ item.timeStr }}</span>
                            <span class="zan">
                                <i class="good" v-show="!item.liked" @click="likeFn(item)"></i>
                                <i class="like" v-show="item.liked" @click="unlikeFn(item)"></i>
                                <i class="count">({{ item.likedCount }})</i>
                                <i class="sep">|</i>
                                <i class="view" @click="replyFn(item)">回复</i>
                            </span>
                        </div>
                        <!-- 回复区域 -->
                        <div class="reply" v-show="item.owner">
                            <textarea placeholder="回复" v-model="recontent"></textarea>
                            <div class="btns">
                              <div><i class="smile"></i><i class="alt"></i></div>
                              <div><span class="count">{{contentMaxLength - recontent.length}}</span><a @click="replyBtn(item)">回复</a></div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { SongDetailApi, LyricApi, SongCommentApi, DetailViewApi, DetailLikeApi, BfApi } from '@/request/api';
import { formatDate } from '@/assets/utils/date';
export default {
    data () {
        return {
            // 歌词数据1
            lyricArr: [],
            lineArr: [],
            activeIndex: 0,

            // 歌词数据2
            currentMUsicLyric: [],
            lyricIndex: 0,

            // 歌词数据3
            lyricsObjArr: [],
            lyricIndex: 0,
            isLyric: 1,

            // 音乐播放数据
            url: "",
            ifPlaying: false,
            ifPaused: true,

            isShow: false,
            commentCount: 0,
            publishTime: 0,
            musicData: [],
            albumData: [],
            tagData: "",
            artistData: [],
            ids: 0,
            imgUrl: "https://img2.baidu.com/it/u=1611088966,2458167776&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            // isPlay: false,
            hotComments: [],
            comments: [],
            content: "",
            recontent: "",
            contentMaxLength: 140,
        }
    },
    filters: {
      showDate: function(value) {
        let date = new Date(value);
        // return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        return formatDate(date, 'yyyy年MM月dd日');
      },
    },
    computed: {
        id() {
            return this.$route.params.id;
        }
    },
    watch: {
        // 获取歌曲的id值
        ids: {
          handler(newValue, oldValue) {
            if (newValue !== oldValue) {
              BfApi(newValue).then((res) => {
                // console.log(res);
                this.url = res.data.data[0].url;
              });
            }
          },
        },
        //监听正在播放的歌曲改变
        currentSong() {  
            this.$nextTick(() => {
                this.$refs.audio.play();
                // console.log(this.$refs.audio.duration); 
                // console.log(e.target.currentTime);
            })
        },
    },
    created() {
        // 获取歌曲详情
        SongDetailApi(this.id).then((res) => {
            // console.log(res);
            this.publishTime = res.data.songs[0].publishTime;
            this.albumData = res.data.songs[0].al;
            this.tagData = res.data.songs[0].alia[0];
            this.artistData = res.data.songs[0].ar;
            this.musicData = res.data.songs[0];
        });
        // 1.获取歌词方式一
        LyricApi(this.id).then((res) => {
            // console.log(res);
            if(res.data.code == 200) {  
                this.lyricArr = res.data.lrc.lyric.split(/\n/);
                this.lyricArr.forEach(item => {
                    let newLrc = item.slice(item.indexOf(']') + 1)   //截取纯歌词部分
                    // console.log(newLrc)
                    if (newLrc) {   //如果歌词有内容（因为最后一句为空）
                      let newTime = item.slice(item.indexOf('['), item.indexOf(']') + 1)   //截取纯每句歌词时间
                      // console.log(newTime)
                      let min = parseInt(newTime.slice(newTime.indexOf('[') + 1, newTime.indexOf(':')))   //从newTime中再截取歌词的分钟数
                      let sec = parseInt(newTime.slice(newTime.indexOf(':') + 1, newTime.indexOf('.')))   //从newTime中再截取歌词的秒数
                      let timeTotal = min * 60 + sec   //把每句歌词时间换算成描述
                      let obj = {   //把歌词的内容和时间放在一个对象里
                        newTime: timeTotal,
                        lyric: newLrc
                      }
                      this.lineArr.push(obj)    //把obj放在空数组里
                    //   console.log(this.lineArr)
                    }
                })
            }
        });
        // 2.获取歌词方式二
        LyricApi(this.id).then((res) => {
            // 处理歌词，转化成key为时间，value为歌词的对象
            let lyricArr = res.data.lrc.lyric.split('[').slice(1); // 先以[进行分割
            let lrcObj = {};
            lyricArr.forEach(item => {
                 let arr = item.split(']');	// 再分割右括号
                 // 时间换算成秒
                 let m = parseInt(arr[0].split(':')[0])
                 let s = parseInt(arr[0].split(':')[1])
                 arr[0] = m*60 + s;
                 if (arr[1] != '\n') { // 去除歌词中的换行符
                     lrcObj[arr[0]] = arr[1];
                 }
             })
             // 存储数据
             this.currentMUsicLyric = lrcObj;
        })
        // 3.获取歌词方式三
        LyricApi(this.id).then((res) => {
            const regNewLine = /\n/
            const lineArr = res.data.lrc.lyric.split(regNewLine) // 每行歌词的数组
            const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
            lineArr.forEach(item => {
            if (item === '') return
              const obj = {}
              const time = item.match(regTime)
              obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
              obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0
              if (obj.lyric !== '') {
                this.lyricsObjArr.push(obj)
              } else {
                return obj.lyric
              }
            })
        })
        SongCommentApi(this.id).then((res) => {
            // console.log(res);
            this.commentCount = res.data.total;
            this.hotComments = res.data.hotComments;
            this.comments = res.data.comments;
        });
    },
    methods: {
        // 锚点跳转
        viewClick() {
            document.querySelector('#view').scrollIntoView({
                behavior: "auto",
                block: "center",
                inline: "nearest"
            })
        },
        // 格式化歌词的时间 转换成 sss:ms
        formatLyricTime (time) { 
            const regMin = /.*:/
            const regSec = /:.*\./
            const regMs = /\./
            const min = parseInt(time.match(regMin)[0].slice(0, 2))
            let sec = parseInt(time.match(regSec)[0].slice(1, 3))
            const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
            if (min !== 0) {
              sec += min * 60
            }
            return Number(sec + '.' + ms)
        },
        // 音乐播放
        musicPlay() {
            // console.log("playingmusic");
            this.ifPlaying = true;
            this.ifPaused = false;
        },
        // 音乐暂停
        musicPause() {
            // console.log("stopingmusic");
            // this.ifPlaying = false;
            this.ifPaused = true ;
        },
        // 获取audio当前播放时长
        getDuration() {
            // console.log(this.$refs.audio.duration); 
           this.duration = this.$refs.audio.duration;
        },
        // 获取audio当前播放时间
        updateTime(e) {
        //   console.log(e.target.currentTime);
          this.currentTime = e.target.currentTime;
          // 匹配歌词
            for (let i = 0; i < this.lyricsObjArr.length; i++) {
                if (this.currentTime > (parseInt(this.lyricsObjArr[i].time))) {
                  const index = this.$refs.lyric[i].dataset.index
                  if (i === parseInt(index)) {
                    this.lyricIndex = i
                    // this.$refs.lyricUL.style.transform = `translateY(${(-30 * (i + 1))}px)`
                  }
                }
            }
        },
        play() {
            this.isPlay = true;
            this.ids = this.musicData.id;
            this.imgUrl = this.musicData.al.picUrl;
        },
        // 评论
        viewBtn() {
          if(this.content.length === 0){
            let obj = { content: "请输入点内容再提交!", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if(this.content.length <= this.contentMaxLength) {
            DetailViewApi({
              t: 1,
              type: 0,
              id: this.id,
              content: this.content,
            }).then((res) => {
              // console.log(res);
              if(res.data.code === 302){
                // 检验评论成功
                let obj = { content: "评论成功!", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
              }else{
                // 检验发送失败
                let obj = { content: "评论失败!", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
              }
            })
            this.content = "";
            this.commentCount = this.commentCount + 1;
          }else{
            let obj = { content: "输入不能超过140字符!", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
        },
        // 点赞
        likeFn(item) {
          if(item.liked === false){
            DetailLikeApi({
              t: 1,
              type: 0,
              id: this.id,
              cid: item.commentId,
            }).then((res) => {
              // console.log(res);
              if(res.data.code === 302){
                let obj = { content: "点赞成功!", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
              }else{
                let obj = { content: "点赞失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
              }
            })
            item.liked = true;
            item.likedCount = item.likedCount + 1;
          }else{
            let obj = { content: "已点赞！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
        },
        // 取消点赞
        unlikeFn(item) {
          if(item.liked === true){
            DetailLikeApi({
              t: 0,
              type: 0,
              id: this.id,
              cid: item.commentId,
            }).then((res) => {
              // console.log(res);
              if(res.data.code === 302){
                let obj = { content: "取消点赞成功!", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
              }else{
                let obj = { content: "取消点赞失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
              }
            })
            item.liked = false;
            item.likedCount = item.likedCount - 1;
          }else{
            let obj = { content: "已取消点赞！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
        },
        // 回复
        replyFn(item) {
          if(item.owner === false){
            this.hotComments.forEach(item=>item.owner=false);
            this.comments.forEach(item=>item.owner=false);
            item.owner = true;
            this.recontent = '回复'+item.user.nickname+':';
          }else{
            item.owner = false;
          }
        },
        // 回复评论
        replyBtn(item) {
          // console.log(item.user.nickname.length+3);
          if(this.recontent.length === item.user.nickname.length+3){
            let obj = { content: "请输入点内容再提交!", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if(this.recontent.length <= this.contentMaxLength){
            DetailViewApi({
              t: 2,
              type: 0,
              id: this.id,
              content: this.recontent,
              commentId: item.commentId,
            }).then((res) => {
              // console.log(res);
              if(res.data.code === 302){
                // 检验回复成功
                let obj = { content: "回复成功!", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
              }else{
                // 检验回复失败
                let obj = { content: "回复失败!", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
              }
            })
            item.owner = false;
          }else{
            let obj = { content: "输入不能超过140字符!", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
        },
    }
}
</script>
 
<style lang = "less" scoped>
@import "@/assets/base";
.detail_l {
    width: 640px;
    background-color: #fff;
    border-left: 1px solid #D7D7D7;
    padding: 40px;
    .detail_t {
        width: 640px;
        min-height: 550px;
        margin-bottom: 40px;
        display: flex;
        justify-content: space-between;
        .pic {
            position: relative;
            width: 206px;
            height: 206px;
            img {
                position: absolute;
                top: 36px;
                left: 36px;
                width: 130px;
                height: 130px;
            }
            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 206px;
                height: 206px;
                display: block;
                background: url("@/assets/images/public/coverall.png") no-repeat;
                background-position: -142px -582px;
            }
        }
        .info {
            width: 410px;
            margin-left: 20px;
            .title {
                width: 410px;
                display: flex;
                margin-bottom: 20px;
                .sing {
                    width: 54px;
                    height: 24px;
                    margin-right: 10px;
                    display: block;
                    background: url("@/assets/images/public/icon.png") no-repeat 0 -464px;
                }
                .name {
                    width: 350px;
                    h2 {
                        height: 32px;
                        font-size: 24px;
                        color: #333;
                    }
                    span {
                        height: 20px;
                        font-size: 14px;
                        color: #BABABA;
                        margin: 5px 0;
                    }
                }
            }
            p {
                height: 16px;
                font-size: 12px;
                color: #999;
                margin: 10px 0;
                a {
                    color: #0C73C2;
                    border-right: 2px solid #999;
                    padding: 0 5px;
                    &:last-of-type {
                        border: none;
                    }
                    &:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
            }
            .btns {
                height: 31px;
                display: flex;
                margin-bottom: 25px;
                .play {
                    span {
                      font-size: 12px;
                      color: #fff;
                      line-height: 31px;
                      padding: 0 0 0 35px;
                    }
                    .play_in {
                      width: 65px;
                      height: 31px;
                      display: block;
                      background: url("../../assets/images/public/button2.png") no-repeat;
                      background-position: 0 -633px;
                      &:hover {
                        cursor: pointer;
                        background-position: 0 -719px;
                      }
                    }
                }
                .add {
                    width: 31px;
                    height: 31px;
                    margin-right: 5px;
                    background: url("../../assets/images/public/button2.png") no-repeat 0 -1588px;
                
                    &:hover {
                        cursor: pointer;
                        background-position: -40px -1588px;
                    }
                    &:active {
                        background-position: -80px -1588px;
                    }
                }
                .dis {
                    margin-right: 6px;
                    height: 100%;
                    background: url("../../assets/images/public/button2.png") no-repeat;
                    background-position: 0px -977px;
                    span {
                        display: inline-block;
                        height: 100%;
                        background: url("../../assets/images/public/button2.png") no-repeat right -1106px;
                        line-height: 30px;
                        padding-left: 30px;
                        padding-right: 4px;
                        font-size: 12px;
                        // color: #ccc;
                    }   
                    &:hover {
                        color: #666;
                        cursor: pointer;
                    }
                }
                .share {
                    height: 31px;
                    margin-right: 6px;
                    float: left;
                    min-width: 23px;
                    cursor: pointer;
                    background: url("../../assets/images/public/button2.png") no-repeat;
                    background-position: 0 -1225px;
                    span {
                        height: 100%;
                        display: inline-block;
                        line-height: 30px;
                        padding-left: 28px;
                        padding-right: 4px;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: right -1020px;
                        font-size: 12px;
                    }
                    &:hover {
                        color: #666;
                        cursor: pointer;
                    }
                }
                .download {
                    margin-right: 5px;
                    height: 31px;
                    min-width: 23px;
                    cursor: pointer;
                    background: url("../../assets/images/public/button2.png") no-repeat;
                    background-position: 0 -2761px;
                    span {
                        height: 100%;
                        width: 31px;
                        display: inline-block;
                        line-height: 30px;
                        padding-left: 28px;
                        padding-right: 8px;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: right -1020px;
                        font-size: 12px;
                    }
                    &:hover {
                        color: #666;
                        cursor: pointer;
                    }
                }
                .comment {
                    margin-right: 5px;
                    height: 31px;
                    min-width: 23px;
                    cursor: pointer;
                    background: url("../../assets/images/public/button2.png") no-repeat;
                    background-position: 0 -1465px;
                    span {
                        height: 100%;
                        display: inline-block;
                        line-height: 30px;
                        padding-left: 28px;
                        padding-right: 8px;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: right -1020px;
                        font-size: 12px;
                        color: #333;
                    }
                    &:hover {
                        color: #666;
                        cursor: pointer;
                    }
                }
            }
            .changeBtn {
                font-size: 12px;
                line-height: 24px;
                button {
                    border: 1px solid #d7d7d7;
                    border-radius: 3px;
                    :first-of-type {
                        border: 1px solid #0C73C2;
                    }
                    &:hover {
                        cursor: pointer;
                        color: #0C73C2;
                        border: 1px solid #0C73C2;
                    }
                }
                .active {
                    color: #0C73C2;
                    border: 1px solid #0C73C2;
                }
            }
            .dec {
                position: relative;
                width: 410px;
                background-color: #f5f5f5;
                font-size: 12px;
                color: #333;
                text-align: center;
                line-height: 30px;
                .clamp {
                    overflow:hidden; 
                    text-overflow:ellipsis; 
                    display:-webkit-box; 
                    -webkit-box-orient:vertical; 
                    -webkit-line-clamp: 13;
                }
                a {
                    text-align: center;
                    font-size: 12px;
                    color: #0C73C2;
                    &:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                    .exp {
                        width: 12px;
                        height: 8px;
                        display: inline-block;
                        background: url("@/assets/images/public/icon.png")    no-repeat -65px -520px;
                    }
                    .col {
                        width: 12px;
                        height: 8px;
                        display: inline-block;
                        background: url("@/assets/images/public/icon.png")    no-repeat -45px -520px;
                    }
                }
                ul {
                    width: 410px;
                    background-color: #f5f5f5;
                    color: #333;
                    font-size: 10px;
                    font-weight: normal;
                    padding: 5px 10px;
                }
                .lyric_white {
                    width: 410px;
                    background-color: #f5f5f5;
                    // 滚动条
                    overflow: auto;
                    color: #333;
                    font-size: 12px;
                    font-weight: normal;
                    padding: 5px 10px;
                    border-left: none;
                    .each {
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                    }
                    .choose {
                        color: #0C73C2;
                        height: 30px;
                        line-height: 30px;
                        font-size: 20px;
                    }
                    // 修改滚动条样式
                    &::-webkit-scrollbar {
                        width: 3px;
                        height: 1px;
                    }
                    // 滑块部分
                    &::-webkit-scrollbar-thumb {
                        background-color: #333;
                    }
                    // 轨道部分
                    &::-webkit-scrollbar-track {
                        background-color: #eee;
                    }
                }
                .lyric_black {
                    width: 410px;
                    background-color: #333;
                    // 滚动条
                    overflow: auto;
                    color: #ddd;
                    font-size: 12px;
                    font-weight: normal;
                    padding: 5px 10px;
                    border-left: none;
                    .each {
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                    }
                    .choose {
                        color: #0C73C2;
                        height: 30px;
                        line-height: 30px;
                        font-size: 20px;
                    }
                    // 修改滚动条样式
                    &::-webkit-scrollbar {
                        width: 3px;
                        height: 1px;
                    }
                    // 滑块部分
                    &::-webkit-scrollbar-thumb {
                        background-color: #eee;
                    }
                    // 轨道部分
                    &::-webkit-scrollbar-track {
                        background-color: #333;
                    }
                }
            }
        }
    }
    .music {
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
        text-align: center;
        border-top: 3px solid @red;
        .music_in {
            // background: rgba(0, 0, 0, 0.2);
            background: #e6e6e6;
            .static {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              border: 3px solid #999;
            }
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              border: 3px solid #999;
            }
            .run {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              border: 3px solid #999;
              animation: rotate 3s linear infinite;
            }
            @keyframes rotate {
              0% {
                  transform: rotateZ(0deg);
                  /*从0度开始*/
              }
              100% {
                  transform: rotateZ(360deg);
                  /*360度结束*/
              }
            }
            .pause{
              animation-play-state:paused;
            }
        }
    }
    .comment_title {
        height: 40px;
        width: 640px;
        border-bottom: 2px solid @red;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        h2 {
            font-size: 20px;
            color: #333;
            cursor: pointer;
            &:hover {
                text-decoration: underline;
            }
        }
        span {
            font-size: 12px;
            color: #666;
            margin: 9px 0 0 20px;
        }
    }
    .comment {
        display: flex;
        font-size: 12px;
        .com_l {
            height: 100px;
            margin-right: 10px;
            img {
                width: 50px;
                height: 50px;
            }
        }
        .com_r {
            height: 100px;
            textarea {
                resize:none;
                width: 565px;
                height: 50px;
                padding: 5px 6px 6px;
                border: 1px solid #cdcdcd;
                border-radius: 2px;
                line-height: 19px;
                box-sizing: content-box;
            }
            .btns {
                padding: 10px 0 0;
                display: flex;
                justify-content: space-between;
                .smile {
                    cursor: pointer;
                    width: 18px;
                    height: 18px;
                    display: inline-block;
                    background: url("@/assets/images/public/icon.png") no-repeat;
                    background-position: -40px -490px;
                    margin-right: 10px;
                }
                .alt {
                    cursor: pointer;
                    width: 18px;
                    height: 18px;
                    display: inline-block;
                    background: url("@/assets/images/public/icon.png") no-repeat;
                    background-position: -60px -490px;
                }
                .count {
                    font-size: 12px;
                    color: #999;
                    margin-right: 10px;
                }
                a {
                    width: 46px;
                    height: 25px;
                    display: inline-block;
                    background: url("@/assets/images/public/button.png") no-repeat;
                    background-position: -84px -64px;
                    color: #fff;
                    text-align: center;
                    line-height: 25px;
                    &:hover {
                        cursor: pointer;
                        background-position: -84px -94px;
                    }
                }
            }
        }
    }
    .comment_list {
        h3 {
            height: 20px;
            width: 640px;
            font-weight: bolder;
            font-size: 12px;
            color: #333;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            margin-top: 20px;
        }
        ul {
            li {
                width: 640px;
                padding: 15px 0;
                display: flex;
                border-bottom: 1px dotted #999;
                &:last-child {
                    border: 0;
                }
                img {
                    cursor: pointer;
                    width: 50px;
                    height: 50px;
                }
                .cnt {
                    font-size: 12px;
                    margin-left: 10px;
                }
                .cnt_t {
                    width: 580px;
                    white-space: pre-wrap;
                    display: flex;
                    align-items: center;
                    .name {
                        line-height: 20px;
                        color: #0C73C2;
                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                            color: #0C73C2;
                        }
                    }
                    .text {
                        line-height: 20px;
                        color: #333;
                    }
                }
                .cnt_c {
                    width: 540px;
                    padding: 8px 20px;
                    margin-top: 10px;
                    line-height: 20px;
                    background: #f4f4f4;
                    border: 1px solid #dedede;
                    display: flex;
                    align-items: center;
                    .name {
                        line-height: 20px;
                        color: #0C73C2;
                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                            color: #0C73C2;
                        }
                    }
                    .text {
                        line-height: 20px;
                        color: #333;
                    }
                }
                .cnt_b {
                    widows: 580px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 15px 0;
                    .time {
                        color: #999;
                    }
                    .zan {
                        .good {
                            width: 15px;
                            height: 14px;
                            display: inline-block;
                            background: url("@/assets/images/public/icon2.png") no-repeat;
                            background-position: -150px 0;
                            &:hover {
                                cursor: pointer;
                                background-position: -150px -20px;
                            }
                        }
                        .like {
                            width: 15px;
                            height: 14px;
                            display: inline-block;
                            background: url("@/assets/images/public/icon2.png") no-repeat;
                            background-position: -170px 0;
                        }
                        .count {
                            margin-left: 8px;
                            color: #333;
                            &:hover {
                                cursor: pointer;
                                text-decoration: underline;
                                color: #333;
                            }
                        }
                        .sep {
                            margin: 0 8px;
                            color: #ccc;
                        }
                        .view {
                            color: #666;
                            &:hover {
                                cursor: pointer;
                                text-decoration: underline;
                                color: #666;
                            }
                        }
                    }
                }
                .reply {
                  width: 550px;
                  padding: 15px;
                  background: #f8f8f8;
                  border: 1px solid #dedede;
                  border-radius: 2px;
                  box-sizing: content-box;
                  textarea {
                    resize:none;
                    width: 540px;
                    height: 20px;
                    padding: 5px 6px 6px;
                    border: 1px solid #cdcdcd;
                    border-radius: 2px;
                    line-height: 20px;
                    text-align: start;
                  }
                  .btns {
                      padding: 10px 0 0;
                      display: flex;
                      justify-content: space-between;
                      .smile {
                          cursor: pointer;
                          width: 18px;
                          height: 18px;
                          display: inline-block;
                          background: url("@/assets/images/public/icon.png") no-repeat;
                          background-position: -40px -490px;
                          margin-right: 10px;
                      }
                      .alt {
                          cursor: pointer;
                          width: 18px;
                          height: 18px;
                          display: inline-block;
                          background: url("@/assets/images/public/icon.png") no-repeat;
                          background-position: -60px -490px;
                      }
                      .count {
                          font-size: 12px;
                          color: #999;
                          margin-right: 10px;
                      }
                      a {
                          width: 46px;
                          height: 25px;
                          display: inline-block;
                          background: url("@/assets/images/public/button.png") no-repeat;
                          background-position: -84px -64px;
                          color: #fff;
                          text-align: center;
                          line-height: 25px;
                          &:hover {
                              cursor: pointer;
                              background-position: -84px -94px;
                          }
                      }
                  }
                }
            }
        }
    }
}
</style>